<template>
  <div class="table-box">
    <ProTable ref="proRef" :columns="columns" :pagination="false" :requestApi="getArtList" :initParam="initParam">
      <template #tableHeader="scope">
        <el-button type="primary" @click="go">创建文章</el-button>
        <el-button type="danger" @click="deleteArtList(scope.selectedListIds)">批量删除</el-button>
      </template>
      <template #opera="{ row }">
        <el-button type="primary" :icon="EditPen" link @click="opera(row)">编辑</el-button>
        <el-button type="primary" :icon="Delete" link @click="deleteArtList([row.id])">删除</el-button>
      </template>
    </ProTable>
  </div>
</template>

<script setup lang="ts">
import ProTable from "@/components/ProTable/index.vue";
import { ColumnProps } from "@/components/ProTable/interface/index";
import { reactive, ref } from "vue";
import { useRouter, useRoute } from "vue-router";
import { getArtList, deleteArtApi } from "@/api/modules/about";
import { EditPen, Delete } from "@element-plus/icons-vue";
import { useHandleData } from "@/hooks/useHandleData";

const router = useRouter();
const route = useRoute();

const deleteArtList = async (ids: any) => {
  try {
    await useHandleData(deleteArtApi, { ids }, "删除所选内容");
    proRef.value?.getTableList();
  } catch (error) {}
};

const initParam = reactive({ id: parseInt(route.query.id as string) });

const proRef = ref<InstanceType<typeof ProTable> | null>();

const columns: ColumnProps[] = [
  { type: "selection", width: 80 },
  { prop: "title", label: "文章标题" },
  { prop: "opera", label: "操作" }
];

const opera = (row: any) => {
  const r = router.resolve({ name: "AboutArticleInfo", query: { id: route.query.id, article_id: row.id } });
  window.open(r.fullPath);
};

const go = () => {
  const r = router.resolve({ name: "AboutArticleInfo", query: { id: route.query.id } });
  window.open(r.fullPath);
};
</script>

<style></style>
